<template>
  <div>
    <img :src="image" class="index-c-img">
    <div :class="scrollTop < 382 ? '' : 'index-tab-box-fixed'">
      <div class="index-tab-box">
        <div class="index-tab">
          <div @click="changeTab(key)" :class="key == tab_index ? 'index-tab-item active' : 'index-tab-item'" v-for="(item,key) in tabs" :key="key">{{item}}</div>
          <div style="flex: 1"></div>
          <div class="web-position">
            <span>您的当前位置：</span>
            <router-link class="link-nav" to="/" >{{
              $store.state.locale == "zh-cn" ? "首页" : "Home"
            }}</router-link>
            <span> > 企业新闻</span>
          </div>
        </div>

      </div>
    </div>
    <div class="index-list" v-if="tab_index == 0">
      <div class="index-list-item" v-for="(item,key) in list" :key="key" >
<!--        <el-image :src="item.image" fit="cover" class="index-list-cover"></el-image>-->
        <div  class="index-list-covers" >
          <el-carousel :interval="5000" arrow="never"  class="index-list-cover" indicator-position="none" height="200px" @change="changeIndex(key,$event)">
            <el-carousel-item v-for="(items,keys) in item.images" :key="keys" class="index-list-cover">
              <el-image  class="index-list-cover" :src="items" fit="cover"></el-image>
            </el-carousel-item>

          </el-carousel>
          <div class="index-list-cover-dot">{{ (item.index + 1) }}/{{ (item.images.length) }}</div>
        </div>

        <div class="index-list-body1">
          <div class="index-list-body-top2">
            <div class="index-list-body-title1">{{item.title}}</div>
            <div class="index-list-body-memo1">{{item.content}}</div>
            <div class="index-list-body-time">{{item.createtime}}</div>
          </div>

<!--          <div class="index-list-body-bottom">
            <img src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/enterprise/enter4.png" class="index-list-body-bottom-icon">
            <div style="flex:1"></div>
            <div class="index-list-body-bottom-more">MORE</div>
          </div>-->
        </div>
      </div>
    </div>
    <div class="index-list" v-else>
      <div class="index-list-item" v-for="(item,key) in list" :key="key" @click="detail(item.id,1)" >
        <el-image :src="item.image" fit="cover" class="index-list-cover"></el-image>
        <div class="index-list-body">
          <div class="index-list-body-top index-list-body-top1">
            <div class="index-list-body-top-left">
              <div class="index-list-body-top-left-day">22</div>
              <div class="index-list-body-top-left-date">06-2022</div>
            </div>
            <div>
              <div class="index-list-body-title">{{item.title}}</div>
              <div class="index-list-body-memo">{{item.subtitle}}</div>
            </div>
          </div>
          <div class="index-list-body-bottom">
            <img src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/enterprise/enter4.png" class="index-list-body-bottom-icon">
            <div style="flex:1"></div>
            <div class="index-list-body-bottom-more">MORE</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      tabs:['赛事风采','新闻资讯'],
      tab_index:0,
      page:1,
      last_page:1,
      list:[],
      image:'',
      scrollTop : 0
    }
  },
  mounted() {
    var index = this.$route.query.index;

    if(index >= 0)this.tab_index = index;
    this.getData();
    this.getBanner();
    window.addEventListener('scroll',this.scrollchange);
  },
  methods:{
    scrollchange(){
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(this.scrollTop)
    },
    changeIndex(key,e){
      this.list[key].index = e;
    },
    openMenu(){
      console.log(123);
    },
    getBanner(){
      this.ajaxs('Index/banner',{
        data:{
          classify:2,
        },
        success:(res) => {
         this.image = res.data.image;
        }
      })
    },
    detail(id,type){
      this.$router.push({
        path:'/enterprise/detail/'+id+'?type='+type
      })
    },
    getData(){
      var url = this.tab_index == 0 ? 'index/competition' : 'Index/newsList';
      this.ajaxs(url,{
        data:{
          page : this.page,
          limit : 15
        },
        success:(res) => {
          this.page = res.data.current_page;
          this.last_page = res.data.last_page;
          for(var i in res.data.data) {
            res.data.data[i].index = 0;
          }
          if(this.page == 1)this.list = res.data.data;
          else this.list = this.list.concat(res.data.data);

        }
      })
    },
    changeTab(index){
      this.tab_index = index;
      this.page = 1;
      this.getData();
    }
  },
  watch:{
    $route(){
      var index = this.$route.query.index;

      if(index >= 0)this.tab_index = index;
      this.getData();
      this.getBanner();
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/enterprise/index.css";
</style>
